Nav Bar
The nav element is an important part of HTML5 and is used extensively for navigation purposes. It doesn't mean that all links on a page have to be in the nav tag. For example, the footer element has links to varied content and the nav tag is not mandatory for these links.
The nav element is used when there is a group of navigation links contained in a speciic section of the page. It is also used extensively where there are links to other pages or a part of the same page. Prior to HTML5, we used something like the following code snippet for navigation purposes:
<div id="nav">
<ul>
<li>…
However, with the nav tag, we can use more realistic code where we group the links in a nav element. Let's look at an example of a nav element using the following code snippet:
<!DOCTYPE html>
<html>
<body>
<header>
<h2> Importance of the Navigation element </h2>
</header>
<p> Use of the Nav element </p>
<hr>
<p> We can go to forums or refer to the articles on this page
<nav>
<ul>
<li> <a href="http://fastread.in"> Home
</li>
<li> <a href=" http://fastread.in/ajax"> Books on AJAX </li>
<li> <a href=" http://fastread.in /latest_articles"> Latest Articles </li>
<li> <a href=" http://fastread.in "> Fastread Online Tutorial </li>
<li> <a href=" http://fastread.in /news"> News
</li>
</nav>
<br>
<footer>
<p> <a href =" http://fastread.in/contact"> Contact us </a> <p>
<a href=" http://fastread.in/about">About us</a>
</footer>
</body>
</html>
The output of the code upon execution would look like this:
Importance of the Navigation element
Use of the Nav element
We can go to forums or refer to the articles on this page
If you observe the code, you will find that there are links between the <nav> and </nav> tags as well as links in the footer tags. The content and links between the nav tags are for major navigation purposes, whereas the links in the footer tag are for some additional information.